<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item prop="name">
        <el-input v-model="queryParams.tableName" placeholder="标准名称" clearable size="small" style="width: 200px" />
      </el-form-item>
      <el-form-item prop="testItem">
        <el-input v-model="queryParams.remark" placeholder="备注" clearable size="small" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="audit-btn">
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="uploadExcelUrl"
        :show-file-list="false"
        :headers="myHeaders"
        accept=".xlsx,.xls"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess">
        <el-button slot="trigger" size="small" type="primary">导入</el-button>
      </el-upload>
      <el-button type="primary" size="mini" @click="addOrEdit('')">创建</el-button>
      <el-button type="primary" size="mini" @click="downLoad">下载模板</el-button>
    </div>
    <el-table v-loading="loading" :data="auditList">
      <el-table-column label="标准ID" align="center" prop="checkTableId" />
      <el-table-column label="标准名称" align="center" prop="checkName" />
      <el-table-column label="总分" align="center" prop="score" width="200" />
      <el-table-column label="更新时间" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center" width="200">
        <template v-slot="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="addOrEdit(scope.row.checkTableId)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteAudit(scope.row.checkTableId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize" @pagination="getList" />
    <add-or-edit-audit ref="addOrEditAudit" @update="updateAudit" />
  </div>
</template>
<script>
import { getAuditList, deleteAuditTable} from '@/api/auditManagement/audit'
import AddOrEditAudit from './addOrEditAudit.vue'
import * as XLSX from 'xlsx'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { downloadModal } from '@/api/common/fileDownload'
export default {
  name: "MessageBoard",
  components: {
    AddOrEditAudit
  },
  data () {
    return { 
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 参数表格数据
      auditList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      // 查询参数
      queryParams: {
        remark: '',
        tableName: ''
      },
      myHeaders: {
        Authorization: 'Bearer ' + getToken()
      },
      uploadExcelUrl: process.env.VUE_APP_BASE_API + "/checkTable/importCheckTable", // 上传的excel服务器地址
    };
  },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      let params = {
        ...this.pagination,
        ...this.queryParams
      }
      getAuditList(params).then(res => {
        this.auditList = res.rows
        this.total = res.total
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.pagination.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.queryParams = {
        remark: '',
        tableName: ''
      }
      this.pagination = {
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery()
    },
    addOrEdit(id){
      this.$refs.addOrEditAudit.init(id)
    },
    updateAudit(){
      this.handleQuery()
    },
    downLoad(){
      axios({
        url: process.env.VUE_APP_BASE_API + '/common/download',
        method: 'get',
        params: {
          delete: false,
          fileName: '导入模板（标准名称为文件名）.xlsx'
        },
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        responseType: 'blob'
      }).then(res => {
        if(!res) return
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型
        if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
          navigator.msSaveBlob(blob, '稽核标准.xlsx')
        } else {
          const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
          const a = document.createElement('a') //创建a标签
          a.style.display = 'none'
          a.href = href // 指定下载链接
          a.download = '稽核标准.xlsx' //指定下载文件名
          a.click() //触发下载
          URL.revokeObjectURL(a.href) //释放URL对象
        }
      })
    },
    deleteAudit(id) {
      this.$confirm('是否确认删除稽核标准?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteAuditTable(id);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    beforeUpload(file){
      const isExcel = /\.(xlsx|xls)$/.test(file.name);
      if (!isExcel) {
        this.$message.error('只能上传.xlsx、.xls 文件!');
        return false;
      }
      return true;
    },
    uploadSuccess(e){
      if(e.code === 200) {
        this.$message.success('文件导入成功');
        this.getList()
      } else {
        this.$message.error(e.msg);
      }
    }
  }
}
</script>
<style scoped lang="scss">
.audit-btn{
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  .upload-demo{
    margin-right: 10px;
  }
}
</style>

